body {
    margin: 0;
    background-color: whitesmoke;
}
h4 {
    letter-spacing: 2mm;
    color: #2775b6;
}
p {
    margin-block-start: 0.3mm;
    margin-block-end: 0.3mm;
    font:normal 5mm/6mm æ¥·ä½“,å®‹ä½“,arial;
    line-height: 6mm;
    letter-spacing: 0.5mm;
}
*:focus {outline:none;} /*åŽ»é™¤æŒ‰é’®ç‚¹å‡»åŽçš„å¤–æ¡†*/
span.red {color: #f03752;}
.page {
    width: 100%;
    left: 0;
    display: none;
}
.home {
    display: inherit;
}
#title {
    height: 1cm;
    width: auto;
    margin: 0 auto 8mm;
    background-color: skyblue;
    font-size: 6mm;
    padding: 3mm;
    color: #223e36;
    font-weight: 900;
    letter-spacing: 1mm;
    text-align: center;
}
#title > span { background-color: #2e2a6d; color: #94c8ca; border-radius: 2mm; padding: 1mm;}
h4 > img {  height: 6mm; width: 6mm; margin-right: 2mm;}
.content {
    height: auto;
    width: 16cm;
    margin: 0 auto;
    padding: 3mm;
}
.more {
    height: 8mm;
    width: auto;
    margin-top: 4mm;
    border-radius: 3mm;
    border-width: 0mm;
    padding: 1mm;
    background-color: #30ace6;
    color: #555e61;
    transition: background-color 1s;
}
.more:hover { background-color: #eea2a4; text-decoration: underline;}
a > p { text-align: center;} /*æŒ‰é’®å±…ä¸­*/
a { text-align: center; text-decoration: none;}
footer div {
    margin-top: 2cm;
    background-color: #2d2e36;
    color: lightgray;
    text-align: center;
    padding: 3mm;
    font-size: 3mm;
}
.info > a { color: lightyellow;}

@media screen and (max-width: 18cm) {
    .content {
      width: 12cm;
    }
  }
@media screen and (max-width: 12cm) {
    .content {
      width: 10cm;
    }
  }
@media screen and (max-width: 10cm) {
    .content {
      width: 8cm;
    }
  }